
<!DOCTYPE html>
<html>
	<head>
		<title>wpcom.js - Upload an image</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>

	<body>
		<div>
			<input type="file" id="file" multiple />
		</div>

		<p id="message"></p>

		<script src="wpcom.js"></script>
		<script src="http://wzrd.in/standalone/wpcom-oauth-cors@1.0.x"></script>
		<script>
			var clientId = ''; // <- your client id here
			var site = ''; // <- your site here

			if (!clientId.length) {
				alert('Define your client id !! :-)');
			}

			if (!site.length) {
				alert('Define your site !! :-)');
			}

			var wpcomOAuth = wpcomOauthCors(clientId);

			wpcomOAuth.get(function(auth) {
				var wpcom = WPCOM(auth.access_token);

				// select files on the "input" element
				var filecontainer = document.getElementById('message');
				var input = document.getElementById('file');

				input.onchange = function (e) {
					var files = [];
					for (var i = 0; i < e.target.files.length; i++) {
						files.push(e.target.files[i]);
					}

					filecontainer.innerHTML = 'Uploading ' + files.length + ' images ...';

					var req = wpcom
					.site(site)
					.addMediaFiles(files, function(err, data){
						if (err) return filecontainer.innerHTML = err.message;

						filecontainer.innerHTML = data.media.length + ' files uploaded';
					});

					req.upload.onprogress = onprogress;
				};
			});

			function onprogress (e) {
				if (e.lengthComputable) {
				var percentComplete = e.loaded / e.total * 100;
				console.log('progress event! %s%', percentComplete.toFixed(2));
				} else {
				// Unable to compute progress information since the total size is unknown
				}
			}
		</script>
	</body>
</html>
